<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="./node_modules/vue/dist/vue.js" ></script>


<body>


            <div class="v-text"></div>

                <script>

                       new Vue({

                         el:".v-text",

                           template:
                             `<div>
                                <span v-text='myText'></span>
                                <hr>
                                <span v-html='myHtml'></span>

                                <button  v-if="num == 1">测试v-if</button>
                                <button v-else-if=" num == 2 ">测试v-else-if</button>
                                <button v-else>测试v-{{ num }}   else</button>

                                <hr>

                                <span v-show="isShow">v-show 测试</span>

                                <hr>
                                <input type="text"

                                    v-bind:value="myValue"
                                    :field="'xxx'"
                                    :num="num"
                                    v-bind:myHtml="myHtml"

                                    >

                                <hr>
                                <button  type="text"   v-on:click=" myValue = 22222  ">v-on动态修改属性值等于22222</button>

                                <button    type="text"   @click=" myValue = 1111111  ">@动态修改属性值等于111111111</button>


                                <hr>
                                <ul>
                                        <li>v-for循环语法使用</li>
                                        <li v-for="(v ,key , index)  in stus "  :file="v.key">
                                            {{v.name}}----{{v.key}}---{{v.index}}
                                        </li>
                                 </ul>
                                      <ul>
                                        <li>v-for循环语法使用</li>
                                        <li v-for="(v ,key , index)  in sarr "  :file="key">
                                            {{v}}----{{key}}---{{index}}
                                        </li>
                                 </ul>

                                <hr>
                                <button @click="changgetIsshow">引用函数事件</button>


                                </div>`
                           ,


                           data: function () {
                             return {
                               myText: 'v-text测试数据绑定',
                               myHtml: '<h1>v-Html测试数据绑定</h1>',
                               num: '0',
                               isShow  :false,
                               myValue: '测试v-bind数据属性赋值',
                               stus : [{name:'张三'},{name:'李四'},{name:'王五'},{name:'肇事'}]
                               ,sarr : {"A" :"AAAAA","B" : "BBBBBB" ,"C" : "CCCCC"}
                             }
                           },methods : {
                                changgetIsshow : function (e) {
                                  console.log(e)
                                    this.isShow = !this.isShow;
                                    this.myText = "methods 动态修改v-text测试"
                                    this.myValue = "methods 测试v-bind数据属性赋值"
                                }
                           }


                       });


                </script>
</body>
</html>
